<template>
	<view class="login-page">
		<u-navbar leftIconColor="rgba(255,255,255,0.0)" :autoBack="false" :placeholder="true"
			bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				登錄
			</view>
			<view slot="right">
				<image class="nav-right" src="../../static/login/right-icon.png" mode=""></image>
			</view>
		</u-navbar>
		<view style="height: 250rpx;"></view>
		<view class="content">
			<view class="new-title">
				密碼登錄
			</view>
			<!-- <u-tabs lineColor="#18BE8C" :list="tablist" itemStyle="width:50%; height: 50px; color:'#fff';"
				lineWidth="35" lineHeight="4" @click="tabsClick"></u-tabs> -->
			<view style="height: 20rpx;"></view>
			<!-- <view v-if="status == 0">
				<view class="title">
					信箱
				</view>
				<view class="item">
					<u--input type="number" maxlength="11" placeholder="請輸入信箱" border="none"
						v-model="email"></u--input>
				</view>
				<view class="title">
					驗證碼
				</view>
				<view class="item">
					<u-input placeholder="請輸入驗證碼" v-model="code" border="none">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新獲取"></u-code>
							<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input>
				</view>
			</view> -->
			<view>
				<view class="title">
					信箱
				</view>
				<view class="item">
					<u--input placeholder="請輸入信箱" border="none" v-model="email"></u--input>
				</view>
				<view class="title">
					密碼
				</view>
				<view class="item">
					<u--input type="password" placeholder="請輸入密碼" border="none" v-model="password"></u--input>
				</view>
			</view>
			<view class="forget">
				忘記密碼
			</view>
			<view style="height: 40rpx;"></view>
			<view class="btn">
				<u-button color="linear-gradient( 159deg, #7DD5CC 0%, #45C5AA 100%)" @click="gologin" size="large" type="primary"
					text="立即登錄"></u-button>
			</view>
			<view class="btn">
				<u-button color="#18BE8C" size="large" type="primary" :plain="true" text="立即註冊"
					@click="goRegister"></u-button>
			</view>
			<view class="tips">
				登入即代表已閱讀並同意《<text>服務協定</text>》《<text>隱私政策</text>》
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				password: '',
				email: '',
				tablist: [{
					name: '驗證碼登錄',
				}, {
					name: '密碼登錄',
				}],
				tips: '',
				status: 0
			}
		},
		onLoad() {

		},
		methods: {
			gologin() {
				if (this.email == '') {
					uni.showToast({
						title: '信箱不可為空！',
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '請輸入密碼！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					userName: this.email,
					password: this.password
				}
				this.$Request({
					method: 'POST',
					url: '/app-api/member/auth/login',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						uni.setStorageSync('token', res.data.accessToken);
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/home/index'
							})
						},1000)
					}
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在獲取驗證碼'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('驗證碼已發送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒計時結束後再發送');
				}
			},
			tabsClick(index) {
				this.status = index.index
			},
			goRegister() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		background-image: url('../../static/login/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 362rpx;

		.nav-title {
			color: #fff;
		}

		.nav-right {
			width: 41rpx;
			height: 41rpx;
		}

		.content {
			background-color: #fff;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			padding: 0 30rpx 30rpx 30rpx;
			.new-title {
				padding-top: 20rpx;
				text-align: center;
			}

			.title {
				font-size: 26rpx;
				color: #333;
				margin-top: 20rpx;
			}

			.item {
				background-color: #F9F9F9;
				border-radius: 15rpx;
				margin-top: 20rpx;
				padding: 20rpx;
			}

			.forget {
				text-align: right;
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999;
			}

			.btn {
				margin-top: 30rpx;
			}

			.tips {
				position: fixed;
				bottom: 5%;
				left: 0;
				right: 0;
				text-align: center;
				font-size: 24rpx;
				color: #999;

				text {
					color: #18BE8C;
				}
			}
		}
	}
</style>